<template>
  <div class="page">
    <m-header :title="langText&&langText.bulletinboard" :canback="Boolean(1)"></m-header>
    <!-- <m-header title="公告栏" :canback="Boolean(1)"></m-header> -->
    <section class="body">
      <ul class="list">
        <li class="item" v-for="item of noticeList" :key="item.id" @click="goto(item.id)">
          <div class="m_t">
            <span>{{item.title}}</span>
            <p class="content">
              <!-- 少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所 -->
            </p>
          </div>
          <!-- <img src="../../assets/images/szxz/jt.png" class="right-img" /> -->
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      noticeList: [],
      type: "mh",
      langText:null,
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(["lang"])
  },
  mounted() {
    this.initData();
    let noticeParams = {
      // type: this.type,
      page: 1
    };
    this.getNotice(noticeParams);
  },
  methods: {
    initData() {
      this.type = this.$route.query.type;
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('homeText')))
    },
    //公告
    getNotice(params) {
      Owner.getTitle({}).then(res => {
        if (res.code == 1) {
          this.noticeList = res.data;
        } else {
          mui.toast(res.msg);
        }
      });
    },
    goto(id) {
      this.$router.push({ name: "NoticeDetail", params: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  background: #fff;
  padding: @padding-primary;
  // background-color: white;
  height: 100%;
  .list {
    .item {
      // .display-flex();
      // justify-content: space-between;
      align-items: center;
      // padding: 12px 0;
      // border-bottom: 1px solid #eee;
      font-size: 28px;
      color: #4EB6AD;
      padding-left: 50px;
      border-left: 4px solid #fff;
      position: relative;
      padding-bottom: 20px;
      // margin-top: -30px;
      &:last-child{
        border-left: 4px solid #fff;
      }
      &::before{
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-color: #ccc;
        border-radius: 50%;
        position: absolute; 
        top: 10px;
        left: 10px;
      }
      &::after{
        content:"";
        display: block;
        width: 6px;
        height: 100%;
        background-color: #ccc;
        position: absolute;
        left: 16px;
        top: 15px;
      }
      &:last-child{
        &::after{
          background-color: none;
          opacity: 0;
        }
      }
      .right-img {
        width: 16px;
        height: 26px;
      }
      .content{
        font-size:28px;
        font-weight:400;
        color:rgba(136,136,136,1);
        margin-top: 10px;
      }
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>
